<template>
  <div>
    <search v-model.trim="msg" :auto-fixed="false"></search>
    <group>
      <popup-radio title="设备选择" v-model="state" :options="options">
        <popup-header slot="popup-header" title="请选择"></popup-header>
      </popup-radio>
    </group>
    <table cellspacing="0">
      <thead>
      <tr>
        <th>序号</th>
        <th>设备编号</th>
        <th>设备名称</th>
        <th>类型</th>
      </tr>
      </thead>
      <tbody>
      <tr v-for="(item, key) in array" :key="key">
        <td>{{key + 1}}</td>
        <td>{{item['deviceNo']}}</td>
        <td>{{item['deviceName']}}</td>
        <td>{{item['deviceType']}}</td>
      </tr>
      </tbody>
    </table>
    <div v-show="list.length===0" class="tip">改厂站暂无设备 请选择其他厂站</div>
  </div>
</template>

<script>
export default {
  name: 'RealData',
  data () {
    return {
      list: [],
      state: '1',
      msg: '',
      options: [
        { key: '1', value: '电力设备' },
        { key: '2', value: '安全工器具' },
        { key: '3', value: '消防设备' },
        { key: '4', value: '公共设备' },
        { key: '5', value: '监测设备' }
      ]
    }
  },
  methods: {
    search (e) {
      window.DocumentDwr.findDeviceInfo(localStorage.buildGroupId, e, res => {
        this.list = res
      })
    }
  },
  created () {
    this.search('1')
  },
  computed: {
    array () {
      return this.list.filter(item => item['deviceName'].includes(this.msg))
    }
  },
  watch: {
    state (val) {
      this.search(val)
    }
  }
}
</script>

<style scoped>
.input{
  -webkit-appearance: none;
  outline: 0;
}
</style>
